import * as echarts from "echarts";
import { useCallback, useEffect, useRef } from "react";
import request from "umi-request"
// 1- 下载引入echarts
// 2- 准备一个具有足够大小的容器
// 3- 初始化这个容器
// 4- 准备配置项
// 5- 设置配置项
const EchartsCom = ()=>{
let instance = useRef() // 如何把一个普通变量缓存起来!!!
const e1 = useRef();
useEffect(()=>{
// 1- 初始化函数
initChart()
// 2- 获取数据函数
getData()
// 3- 设置数据函数
},[]);
// 1- 初始化函数
const initChart =()=>{
console.log("初始化函数");
instance = echarts.init(e1.current);
// 静态不变的配置
let options = {
title:{
text:"各种农作物产量"
},
xAxis:{
type:"category",
data:["小米","大豆"]
},
yAxis:{
type:'value'
},
series:[{
type:"bar",
data:[100,130]
}]
}
instance.setOption(options)
}

const getData = ()=>{
console.log("获取数据函数");

request.get("http://localhost:3002/api/plantingAreaTop").then(res=>{
console.log(res);
const xData = res.map(item=>{
return item.name
})
const seriesData = res.map(item=>{
return item.area
})
setChart(xData,seriesData)
})
}

const setChart = (xData,seriesData)=>{
console.log("设置数据函数");
let options = {
xAxis:{
data:xData
},
series:[{
data:seriesData
}]
}
instance.setOption(options)
}
console.log(initChart,getData,setChart);


return (
<>
	<h2>绘制图表</h2>
	<hr />
	<div ref={e1}
		 style={{height:'60vh',border:'2px solid red'}}></div>
</>
)
}
export default EchartsCom;